<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        html,body {
            margin: 0;
            height: 100%;
        }
        body>.el-container{
            height: 100%
        }
        .menu {
            height: 100%;
        }
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }
        .el-main {
            background-color: #fbfdff;
            color: #333;
            text-align: center;
            line-height: 160px;
        }
        .el-radio-group {
            display: inline-block;
            line-height: 1;
            vertical-align: middle;
            font-size: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="margin: 0px !important;">
        <el-aside style="background: white !important;height:100vh !important;width:25%;border: 0px solid #ccc; border-radius: 16px;">
            <div class="custom-tree-container">
                <div class="block">
<!--                    show-checkbox-->
                    <el-tree
                            :data="data"
                            :props="treeProps"
                            node-key="id"
                            default-expand-all
                            :expand-on-click-node="false"
                            @node-click="handleTreeNodeClick">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ data.name }}</span>
        <span>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => append(data)">
            增加子节点
          </el-button>
          <el-button
                  v-if="data.id != 0"
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
       </el-tree>
                </div>
            </div>
        </el-aside>
        <!--<div style="border: 1px solid #ccc; border-radius: 16px;width: 100%;height: 100%">-->
        <el-main style="border: 1px solid #ccc; border-radius: 16px;">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="font-weight: bold">
                <el-row :gutter="20" type="flex" justify="space-between">
                    <el-col :span="11">
                        <el-form-item label="id">
                            <el-input disabled v-model="ruleForm.id" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" type="flex" justify="space-between">
                    <el-col :span="11">
                        <el-form-item label="连接">
                            <el-input v-model="ruleForm.pagePath" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="父节点" prop="name">
                            <el-input disabled v-model="ruleForm.parentId"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" type="flex" justify="space-between">
                    <el-col :span="11">
                        <el-form-item label="图标">
                            <el-input v-model="ruleForm.icon" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="是否可用">
                            <el-radio-group v-model="ruleForm.flag">
                                <el-radio label="1">是</el-radio>
                                <el-radio label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" type="flex" justify="space-between">
                    <el-col :span="11">
                        <el-form-item label="排序">
                            <el-input-number v-model="ruleForm.sort" :step="1" controls-position="left"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="是否显示">
                            <el-radio-group v-model="ruleForm.isShow" >
                                <el-radio label="1">是</el-radio>
                                <el-radio label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button v-if="ruleForm.id==null" type="primary" @click="submitForm('save')">创建</el-button>
                    <el-button v-else type="success" @click="submitForm('update')">更新</el-button>
<!--                    <el-button @click="resetForm('ruleForm')">重置</el-button>-->
                </el-form-item>
            </el-form>
        </el-main>
        <!--</div>-->
    </el-container>
</div>
</body>

<script type="text/javascript" th:src="@{/js/json2.js}"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> &lt;!&ndash;vue要放在element ui前面&ndash;&gt;-->
<script th:src="@{/js/vue.js}"></script> <!--vue要放在element ui前面-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script th:src="@{/js/layer.js}"></script>
<script language='javascript' th:inline="javascript">
    let id = 1000;
    new Vue({
        el: '#app',
        data: function () {
            const data = [];
            return {
                treeProps:{
                    id:'id',
                    children: 'children',
                    label: 'name'
                },
                data: JSON.parse(JSON.stringify(data)),
             /*   data: JSON.parse(JSON.stringify(data)),*/
                ruleForm: {
                },
                rules: {

                }
            }
        },
        created() {
        this.init()
        },
        methods: {
            init(){
                _this = this
                $.get("/menu/getAllMenus", {}, function(msg) {
                    _this.data = [{id:'0',name:'系统',children:msg.data}]
                    // _this.data = msg.data
                })
            },
            submitForm(formName) {
                _this = this
                        if (formName == 'update'){
                            axios({
                                url: "/menu/updateMenu",
                                data: _this.ruleForm,
                                method: 'post',
                                contentType: "application/json",
                            }).then(res => {
                                _this.submitTaskVisible = false
                                var msg = res.data.message
                                this.$message({
                                    showClose: true,
                                    message: msg,
                                    type: msg
                                });
                            })
                        }else{
                            axios({
                                url: "/menu/saveMenu",
                                data: _this.ruleForm,
                                method: 'post',
                                contentType: "application/json",
                            }).then(res => {
                                _this.submitTaskVisible = false
                                var msg = res.data.message
                                this.$message({
                                    showClose: true,
                                    message: msg,
                                    type: msg
                                });
                            })
                        }

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            // 点击树节点事件处理
            handleTreeNodeClick(data, node, elem){
                this.ruleForm = data
                // data.id即为科室id，根据这个科室id触发医生表格数据的查询...
            },
            append(data) {
                const newChild = {parentId: data.id, name: '新节点', children: []};
                if (!data.children) {
                    this.$set(data, 'children', []);
                }
                data.children.push(newChild);
                console.log(data)
            },

            remove(node, data) {
                this.$message.error('真正的删除功能还没做哦');
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex(d => d.id === data.id);
                children.splice(index, 1);
            },


        }
    })
</script>

</html>